<template>
  <view class="work-container">
    <TopBar :tabBars="tabBars" :tabIndex="tabIndex" @change="onTabChange"></TopBar>
    <view class="background-white">
      <view class="flex text bor-btm">
        巡检频次：<text>{{ selectData.executionCycleDicLabel }}</text>
      </view>
    </view>
    <view v-if="taskList && taskList.length > 0">
      <view class="grid-body mt-30" v-for="(item, index) in taskList" :key="index">
        <view class="check grid-common">
          <view class="flex text">
            下发时间：<text>{{ item.createTime }}</text>
          </view>
          <view class="flex text">
            巡检类型：<text>{{ item.inspectionTypeLabel }}</text>
          </view>
          <view class="flex text">
            任务名称：<text>{{ item.taskName }}</text>
          </view>
          <view class="flex text">
            巡检人：<text>{{ item.executionUserName }}</text>
          </view>
          <view class="flex text bor-top flex-row-r-c">
            <view class="flex">
              <button class="info-btn" @click="deal(item)">详情</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <Empty></Empty>
    </view>
  </view>
</template>

<script>
import TopBar from './topBar.vue'
import { getPlanList, getListByPlanId } from '@/api/equipment/Inspection-new.js'
import Empty from '@/components/cu-empty/index.vue'
export default {
  components: { Empty, TopBar },
  computed: {},
  data() {
    return {
      taskList: [],
      inspectionName: '',
      tabBars: [],
      selectData: {},
      tabIndex: 0,
      inspectionId: '',
      pageNum: 1,
      pageSize: 10,
      isFinished: false,
      total: null
    }
  },
  // onShow() {
  //   this.getItemList();
  // },
  onLoad({ inspectionId, inspectionName }) {
    this.inspectionId = inspectionId
    uni.setNavigationBarTitle({
      title: inspectionName
    })
    this.getItemList()
  },
  onPullDownRefresh() {
    this.getItemList()
  },
  onReachBottom() {
    this.pageNum++
    this.getListByPlan()
  },
  methods: {
    onTabChange(index) {
      this.tabIndex = index
      this.selectData = this.tabBars[index]
      this.taskList = []
      this.isFinished = false
      this.pageNum = 1
      this.total = null
      this.getListByPlan()
    },
    getItemList() {
      getPlanList(this.inspectionId).then((res) => {
        this.tabBars = res.data ? res.data : []
        if (this.tabBars.length > 0) {
          this.selectData = this.tabBars[0]
          this.taskList = []
          this.isFinished = false
          this.pageNum = 1
          this.total = null
          this.getListByPlan()
        }
      })
    },
    getListByPlan() {
      if (this.isFinished) {
        return
      }
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      if (!this.total || this.total > this.taskList.length) {
        getListByPlanId(this.selectData.id, data)
          .then((res) => {
            if (this.pageNum === 1) {
              this.taskList = res.rows
            } else {
              this.taskList.push(...res.rows)
            }
            this.total = res.total
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    },
    deal(item) {
      uni.navigateTo({
        url: '/pages/work/inspectTask/components/lookDetail?subTaskId=' + item.subTaskId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.background-white {
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  .uni-forms-item__label {
    color: #333;
    font-size: 30rpx;
  }
  .text {
    padding-bottom: 20rpx;
    padding-top: 4rpx;
    color: #333;

    text {
      color: #666;
    }
  }
}
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
